/* 一个待办事项列表状态store */
// computed: 用于get方法. 派生状态. 比如订单金额 = 订单数量x单价. 订单金额就是computed
// 同样下面的 completedTodosCount 和 report 都是computed状态
// action: 用于set方法
//
/* 
{
  todos: [
    {
      task: '',
      completed: false,
      assignee: ''
    },
    ...
  ]
}
*/
import {extendObservable, computed, action,  useStrict} from 'mobx'

useStrict(true)

class TodoStore {
  constructor() {
    extendObservable(this, {
      // 存储待办列表的数组
      todos: [],
      // 返回已完成待办事项的数目(get方法)
      completedTodosCount: computed(() => {
        return this.todos.filter(
          todo => todo.completed === true
        ).length
      }),
      // 报告当前待办事项列表的情况
      report: computed(()=>{
        if (this.todos.length === 0) {
          return '<无待办事项>'
        } else {
          return `进度: ${this.completedTodosCount} / ${this.todos.length}`
        }
      }),
      // 添加一个待办事项(set方法)
      addTodo: action((task, assignee) => {
        let todo = new Todo(task, false, assignee)
        saveTodoToServer(todo)
      })
    })
  }

  loadDataFromServer() {
    APIEndPoint.get('/todos')
    .then(response=>{
      response.map(item=> {
        this.addTodo(item.task, item.assignee)
      })
    })
  }

  // todo: {name: "abc", color: "xyz"}
  saveTodoToServer(todo) {
    APIEndPoint.post('/todo', todo).then(()=>{
      this.todos.push(todo)
    })
  }

  saveDataToServer() {
    APIEndPoint.post('/todos', {
      todos: this.todos
    })
  }
}

// 待办事项项目结构
class Todo {
  constructor(task, assignee) {
    extendObservable(this, {
      task: task,         // 任务内容
      completed: false,   // 是否完成
      assignee: assignee, // 任务负责人
      setCompleted: action(() => this.completed = !this.completed),
      setTodoTask: action((task) => {
        this.task= task
        saveTaskToServer()
      })
    })
  }

  saveNewTaskToServer() {
    APIEndPoint.post('/todo', {
      todo: this.todo
    })
  }
}

const todoStore = new TodoStore()

export default todoStore
